<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
            <el-form-item label="菜品分类id" prop="id">
                <el-input v-model="ruleForm.id" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="菜类名称" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="销售类型" prop="type">
                    <el-radio v-model="ruleForm.type" label= "1" >菜品</el-radio>
                    <el-radio v-model="ruleForm.type" label= "2" >套餐</el-radio>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即更新</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import {updateCategory} from '@/utils/requests'
export default {
    props:['transid','transname','transtype'],
    watch:{
        transid:{
            handler:function(newVal){
                this.ruleForm.id = newVal
            },
            immediate:true,
            deep:true
        },
        transname:{
            handler:function(newVal){
                this.ruleForm.name = newVal
            },
            immediate:true,
            deep:true
        },transtype:{
            handler:function(newVal){
                this.ruleForm.type = newVal
            },
            immediate:true,
            deep:true
        }
    },
    data() {
        return {
            ruleForm: {
                id:'',
                name: '',
                type:'1'
            },
            rules: {
                id:[
                    {required:false}
                ],
                name: [
                    { required: true, message: '请输入菜品名称', trigger: 'blur' },
                    { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
                ],
                type: [
                    { required: true, message: '请选择一种菜类类型', trigger: 'change' }
                ],
            }
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    updateCategory(this.ruleForm).then((res)=>{
                        if(res.statusCode == 200){
                            this.$message({
                                showClose:true,
                                message:res.message,
                                type:'success'
                            })
                        }else{
                            this.$message({
                                showClose:true,
                                message:res.message,
                                type:'error'
                            })
                        }
                    })
                    // 表单提交事件触发后自动触发父组件中的change
                    this.$emit('change',false)
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>